<template>
  <div class="editArticle-page">
    <GhNavBar class="head" title="编辑文章"  rightText="保存" @click-right="clickRight" />
    <div class="content">
        <van-field  v-model="article.title"   placeholder="请输入文字标题"  label="文章标题" required label-width="70px" autocomplete="off" ></van-field>
        <van-field  v-model="article.picture"   placeholder="请输入图片链接"  label="图片链接" required label-width="70px" autocomplete="off" ></van-field>
        <van-field
              v-model="article.content"
              class="con_box"
              label="内容"
              type="textarea"
              label-width="30px"
              autosize
              rows="15" 
              placeholder="请输入文章内容"
              required
          ></van-field>
    </div>
  </div>
</template>

<script setup>
import {ref,reactive,onBeforeMount,computed,onMounted,watch} from "vue"
import { Toast, Dialog } from 'vant';
import 'vant/es/toast/style'
import{useRouter,useRoute}from 'vue-router'
const router =useRouter();  
const route =useRoute()
import{getArticleByid,updateArticleByid}from '@/services/consultant'

//定义文章信息响应式变量
const article=ref({
    title:'',
    content:'',
    picture:'',
    author:''
})

onMounted(async()=>{
    const article_id=route.params.id
    const res =await getArticleByid(article_id)
    article.value=res.data
})

//确定完成文章编辑操作
const clickRight=async()=>{
    if(article.value.title.trim()===''){
        Toast('请输入文章标题!')
        return
    }
    if(article.value.picture.trim()===''){
        Toast('请输入文章图片!')
        return
    }
    if(article.value.content.trim()===''){
        Toast('请输入文章内容!')
        return
    }
    const formData=new FormData();
    formData.append('id',article.value.id)
    formData.append('title',article.value.title)
    formData.append('picture',article.value.picture)
    formData.append('content',article.value.content)
    const res=await updateArticleByid(formData).then((response)=>{
      return response
    }).catch((error)=>{
     return error
    })
   if(res.status!==201){
   if(res.response.status==402){
        const toastMessage=res.response.data.error
        Toast.fail(toastMessage)
        return
       }
    }
    Toast.success('修改成功')
    article.value={}
    router.replace('/articlePublish')
}


</script>

<style lang="scss" scoped>
.editArticle-page{
    width: 100%;
    .content{
        margin-top: 44px;
        width: 100%;
         .con_box{
            border: 1px solid #918585;
         }

    }
}

</style>
